import React,{Component} from 'react'
import PubSub from 'pubsub-js'
// import axios from 'axios'

export default class Search extends Component{

  search = async()=>{
    //连续解构赋值+重命名
    const {keyWordElement:{value:keyWord}} = this

    //发送请求前，通知List更新状态
    //发布消息
    PubSub.publish('atguigu',{isFirst:false,isLoading:true})

    /*  发送网络请求————使用axios发送请求
    //此处是借助服务器文件写的跨域获取数据，“http://localhost:3000”是本地地址，是可以省略的
    axios.get(`/api1/search/users2?q=${data}`).then(
      response => {
        // 请求成功后，通知List更新状态
        PubSub.publish('atguigu',{isLoading:false,users:response.data.items})
      },
      error => {
        //请求失败后，通知List更新状态，仅存储error会报错
        PubSub.publish('atguigu',{isLoading:false,err:error.message})
      }
    )
    */

    //发送网络请求————使用fetch发送（未优化）
    /*fetch(`/api1/search/users2?q=${data}`).then(
      response => {
        console.log('服务器访问成功');
        return response.json()
      },
      // error => {
      //   console.log('服务器访问失败',error);
      //   return new Promise(()=>{})
      // }
    ).then(
      response => {console.log('获取数据成功',response)},
      // error => {console.log('获取数据失败',error)}
    ).catch(
      (error)=>{console.log('请求出错',error)}
    )
    */

    //优化版本
    try{
      const response = await fetch(`/api1/search/users2?q=${keyWord}`)
      const data = await response.json()
      PubSub.publish('atguigu',{isLoading:false,users:data.items})
    }catch(error){
      console.log('请求出错',error)
      PubSub.publish('atguigu',{isLoading:false,err:error.message})
    }
  }

  render(){
    return (
      <section className="jumbotron">
        <h3 className="jumbotron-heading">搜索 Github 用户</h3>
        <div>
          {/* 回调形式的ref */}
          <input ref={c => this.keyWordElement = c } type="text" placeholder="输入用户名搜索"/>&nbsp;
          <button onClick={this.search}>搜索</button>
        </div>
      </section>
    )
  }
}